'use client';

export default function StreamLoading() {
    return (
        <div className="min-h-screen bg-gray-900 p-8">
            <div className="max-w-7xl mx-auto">
                <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
                    {/* 主视频区域 */}
                    <div className="lg:col-span-3">
                        <div className="bg-gray-800 rounded-lg overflow-hidden relative">
                            <div className="aspect-video bg-gray-700" />
                            <div className="p-4">
                                <div className="h-6 bg-gray-700 rounded w-3/4 mb-4" />
                                <div className="flex items-center space-x-4">
                                    <div className="w-12 h-12 bg-gray-700 rounded-full" />
                                    <div className="flex-1">
                                        <div className="h-4 bg-gray-700 rounded w-1/4 mb-2" />
                                        <div className="h-4 bg-gray-700 rounded w-1/3" />
                                    </div>
                                </div>
                            </div>
                            {/* 闪光动画遮罩 */}
                            <div className="absolute inset-0 bg-gradient-shimmer animate-shimmer bg-[length:200%_100%]" />
                        </div>
                    </div>

                    {/* 聊天区域 */}
                    <div className="lg:col-span-1">
                        <div className="bg-gray-800 rounded-lg h-[600px] relative">
                            <div className="p-4 border-b border-gray-700">
                                <div className="h-5 bg-gray-700 rounded w-1/2" />
                            </div>
                            <div className="p-4 space-y-4">
                                {[...Array(6)].map((_, i) => (
                                    <div key={i} className="flex items-start space-x-3">
                                        <div className="w-8 h-8 bg-gray-700 rounded-full" />
                                        <div className="flex-1">
                                            <div className="h-3 bg-gray-700 rounded w-1/4 mb-2" />
                                            <div className="h-3 bg-gray-700 rounded w-3/4" />
                                        </div>
                                    </div>
                                ))}
                            </div>
                            {/* 闪光动画遮罩 */}
                            <div className="absolute inset-0 bg-gradient-shimmer animate-shimmer bg-[length:200%_100%]" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
